import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
import ViewJson from './ViewJson';
import Modal from './Modal';
import $ from 'jquery';


class Page2 extends React.Component {

	//init
	constructor(props) {

		super(props);

		this.state = {
			email: '',
			passwd: '',
			param: ''
		};

		this.changeValue = (type, event) => {
			//console.log('type', type);
			if (type === 'email') {
				this.setState({
					email: event.target.value
				});
			}

			if (type === 'passwd') {
				this.setState({
					passwd: event.target.value
				})
			}
			if (type === 'param') {
				this.setState({
					param: event.target.value
				})
			}
		};

		this._submit = () => {
			var user = {};
			if (this.refs.email.value == '') {
				this.refs.email.focus();
				return;
			}
			user.email = this.refs.email.value;

			if (this.refs.passwd.value == '') {
				this.refs.passwd.focus();
				return;
			}
			user.passwd = this.refs.passwd.value;

			if (this.refs.param.value == '') {
				this.refs.param.focus();
				return;
			} else {
				user.url = this.refs.param.value;
				var data = { data: user };
				let rs = this.refs.getChildLoadJson.saveUser(data);
				this.refs.getChildOpen.hideLayer();
				this.refs.fm.reset();
			}
		};

		this.call = () => {
			alert('page2');
		};
	}

	//组件被插入DOM前执行
	componentWillMount() {
		// console.log('组件被插入DOM前执行', this.state);
	}


	//组件被插入DOM后执行
	componentDidMount() {
		// console.log('组件被插入DOM后执行', this.state);
	}



	//组件更新前执行，不能在此处调用this.setState()
	// componentWillUpdate(nextProps, nextState) {
	// 	console.log('组件更新前执行',this.props,nextProps);
	// 	return this.props !== nextProps;
	// }

	//组件更新后执行
	componentDidUpdate(prevProps, prevState) {
		//console.log('组件更新后执行');
	}

	//组件发生改变时执行
	// shouldComponentUpdate(nextProps, nextState){
	// 	var flag = (this.state===nextState);
	// 	console.log('组件发生改变时执行',this.state,nextState);
	// 	return !flag;
	// }

	//组件被移除前执行
	componentWillUnmount() {
		//console.log('组件被移除前执行');
	}


	render() {
		const content = <form className="form-horizontal" ref="fm" >
			<div className="form-group">
				<label className="col-sm-2 control-label">Email</label>
				<div className="col-sm-10">
					<input type="email" className="form-control" ref="email"/>
				</div>
			</div>
			<div className="form-group">
				<label className="col-sm-2 control-label">Password</label>
				<div className="col-sm-10">
					<input type="text" className="form-control" ref="passwd"/>
				</div>
			</div>
			<div className="form-group">
				<label className="col-sm-2 control-label">URL</label>
				<div className="col-sm-10">
					<input type="text"  className="form-control" ref="param"/>
				</div>
			</div>
			<div className="form-group">
				<div className="col-sm-2">
				</div>
				<div className="col-sm-10">
					<button type="button" className="btn btn-success" onClick={this._submit}>保存</button>
					<button type="button" style={{ marginLeft: "20px" }} className="btn btn-warning" onClick={() => { this.refs.getChildOpen.hideLayer(); }}>取消</button>
				</div>
			</div>
		</form>

		return (
			<div id='page2'>
				<div className="row">
					<div className="col-sm-1">
						<button type="button" onClick={() => { this.refs.getChildOpen.showLayer(); }} className="btn btn-primary">Add</button>
					</div>
				</div>
				<div className="row">
					<div className="col-sm-12">
						<ViewJson ref="getChildLoadJson" callBack={this.call} param={this.state.param} />
					</div>
				</div>
				<Modal ref="getChildOpen" type="2">{content}</Modal>
			</div>
		);
	}
}
export default Page2;
